import React, { useEffect, useRef, useState } from 'react';
import { Image, View, Text } from '@tarojs/components';
import { connect } from 'react-redux';
import Taro from '@tarojs/taro';
import CommentRate from '@/components/Comment/Rate/index';

import './item.scss';

const CommentListItem = ({ dispatch, data = {}, showRate = false }) => {
  const [showPart, setShowPart] = useState(false);
  const userExpend = useRef(false);
  const images = data.imgUrls ? data.imgUrls.split(',') : [];
  const handleImage = (current, urls) => {
    dispatch({
      type: 'globalComponent/previewImage',
      payload: {
        previewImage: {
          urls,
          current,
        },
      },
    });
  };

  const handleExpendReplay = () => {
    userExpend.current = true;
    showPart && setShowPart(false);
  };

  const checkReplayHeight = () => {
    if (data.replayContent?.length) {
      const query = Taro.createSelectorQuery();
      query
        .select('#replayId' + data.id)
        .boundingClientRect((r) => {
          if (r?.height > 40) {
            setShowPart(true);
          }
        })
        .exec();
    }
  };

  useEffect(() => {
    Taro.nextTick(() => {
      !userExpend.current && checkReplayHeight();
    });
  });

  return (
    <View className="commentListItem">
      <View className="part1">
        <Image className="avatar" src={data.avatar}></Image>
        <View className="text">
          <View className="name">{data.nickName || '****用户'}</View>
          <View className="info">
            {data.created} {data.scoreList.length ? ' | ' : ''}
            {data.scoreList.slice(0, 3).map((s, i) => (
              <View className="tag" key={i}>
                <View>{s.name + '：' + s.comment}</View>
              </View>
            ))}
          </View>
        </View>
      </View>
      <View className="part2">
        {showRate && (
          <View className="rateDetail">
            <CommentRate showNum class="rate" value={parseInt(data.score)} />
          </View>
        )}
        <View className="commentContent">{data.content || '此用户没有填写评价内容'}</View>
        {!!images.length && (
          <View className={'picList count' + images.length}>
            {images.slice(0, 3).map((img, idx) => (
              <View className="picBox" key={idx}>
                <Image
                  mode="aspectFill"
                  className="pic"
                  src={img}
                  onClick={() => handleImage(idx, images)}
                />
              </View>
            ))}
            {images.length > 2 && <View className="picNum">{images.length}</View>}
          </View>
        )}
      </View>
      <View className={'part3 ' + (data.replayContent?.length > 0 && 'show')}>
        <View className="title">掌柜回复</View>
        <View className="text">
          <Text
            id={'replayId' + data.id}
            className={'replay ' + (showPart ? 'showPart' : '')}
            dataSet={data.id}
          >
            {data.replayContent || ''}
          </Text>
          <View className={'operate ' + (showPart ? 'show' : '')} onClick={handleExpendReplay}>
            <Text className="dot">...</Text>
            <Text className="btn">展开</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default connect(({}) => ({}))(CommentListItem);
